<template>
  <div class="apidoc-index">
    <iframe class="apidoc-iframe" :src="apiDocUrl"></iframe>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElNotification } from 'element-plus';
import { storeToRefs } from 'pinia';
import { isNull } from "@/assets/utils/obj";
import { useEnvStore } from '@/stores/env';
import { useServiceStore } from '@/stores/service';

const envStore = useEnvStore();
const serviceStore = useServiceStore();
const { env } = storeToRefs(envStore);
const { serviceId } = storeToRefs(serviceStore);

const apiDocUrl = ref('')

const init = () => {
  if (isNull(env.value.gatewayUrl)) {
    ElNotification({ title: '提示', message: '请先在屏幕右上方选择环境和集群名称', type: 'error', position: 'bottom-right' });
  } else {
    apiDocUrl.value = env.value.gatewayUrl + "/" + serviceId.value + "/apidoc/index.html";
  }
}

onMounted(() => {
  init();
})
</script>

<style scoped lang="scss">
.apidoc-index {
  @include box(100%, 100%);

  .apidoc-iframe {
    @include box(100%, 100%);
    border: 1px solid #f8f8f7;
  }

}
</style>


